<template>
  <!-- 推荐歌单页面 -->
  <div class="recommend">
    <!-- 顶部精品歌单 -->
    <div class="high-quality">
      <img class="bcg" :src="highQuality.coverImgUrl" alt="">
      <img class="image" :src="highQuality.coverImgUrl" alt="">
      <div class="info-wrap">
        <span class="text">精品歌单</span>
        <h5 class="name">{{highQuality.name}}</h5>
        <p class="description">{{highQuality.description}}</p>
      </div>
    </div>
    <!-- 标签栏 -->
    <ul class="tag-wrap clearfix">
      <li :class="{active:currentIndex===index}" v-for="(item,index) in tag"
        :key="item" @click="changeCurrentTag(index)">{{item}}</li>
    </ul>

    <!-- 歌单卡片列表 -->
    <music-card :recommend="musicList"></music-card>

    <!-- 分页器 -->
    <el-pagination @size-change="handleSizeChange" background
      @current-change="handleCurrentChange" :current-page="1"
      :page-sizes="[5,10,15]" :page-size="10"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import musicCard from './MusicCard'
export default {
  data() {
    return {
      // 顶部精品歌单请求参数
      highQualityRequest: {
        // 取出歌单数量
        limit: 1,
        // 歌单的标签
        cat: '全部'
      },
      // 歌单列表请求参数
      listRequest: {
        // 取出歌单数量
        limit: 10,
        // 偏移量 用于分页
        offset: 0,
        // 歌单的标签
        cat: '全部'
      },
      // 顶部精品歌单数据
      highQuality: {},
      // 歌单列表数据
      musicList: [],
      // 标签
      tag: [
        '全部',
        '欧美',
        '华语',
        '流行',
        '说唱',
        '摇滚',
        '民谣',
        '电子',
        '轻音乐',
        '影视原声',
        'ACG',
        '怀旧',
        '治愈'
      ],
      // 当前标签索引
      currentIndex: 0,
      // 总条数
      total: 100
    }
  },
  components: {
    musicCard
  },
  created() {
    this.getHighQuality()
    this.getMusicList()
  },
  methods: {
    // 获取精品歌单数据
    async getHighQuality() {
      const res = await this.$request.get(
        'https://autumnfish.cn/top/playlist/highquality',
        {
          params: this.highQualityRequest
        }
      )
      this.highQuality = res.data.playlists[0]
    },
    // 获取歌单列表
    async getMusicList() {
      const res = await this.$request.get(
        'https://autumnfish.cn/top/playlist/',
        {
          params: this.listRequest
        }
      )
      this.musicList = res.data.playlists
      this.total = res.data.total
    },
    // 点击标签
    changeCurrentTag(index) {
      this.currentIndex = index
      this.highQualityRequest.cat = this.tag[this.currentIndex]
      this.listRequest.cat = this.tag[this.currentIndex]
      this.getHighQuality()
      this.getMusicList()
    },
    // 改变显示条数
    handleSizeChange(val) {
      this.listRequest.limit = val
      this.getMusicList()
    },
    // 改变当前页码
    handleCurrentChange(val) {
      this.listRequest.offset = (val - 1) * this.listRequest.limit
      this.getMusicList()
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend {
  max-width: 1100px;
  margin: 0 auto;
  .el-pagination {
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
  ::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: var(--theme-color); // 进行修改背景和字体
    color: #ffffff;
  }
  ::v-deep.el-pagination.is-background li:not(.disabled):hover {
    color: var(--theme-color);
  }
}
.high-quality {
  position: relative;
  display: flex;
  align-content: center;
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 5px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  .bcg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    filter: blur(25px);
  }
  .image {
    width: 160px;
    margin-right: 20px;
  }
  .info-wrap {
    flex: 1;
    .text {
      width: 80px;
      height: 20px;
      padding: 5px 10px;
      line-height: 20px;
      text-align: center;
      border: 1px solid currentColor;
      border-radius: 3px;
      font-size: 16px;
      color: #dfac67;
    }
    .name {
      margin-top: 20px;
      color: #fff;
      font-size: 16px;
    }
    .description {
      color: #888482;
      font-size: 14px;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
    }
  }
}
.tag-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 30px 0;
  li {
    margin-right: 20px;
    color: #808080;
    cursor: pointer;
  }
  .active {
    color: var(--theme-color);
  }
}
</style>